<!DOCTYPE html>
<html>
<head>
    <title>医学影像检索系统-上传文件</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/js.cookie.js"></script>
    <link href="/css/style.css" rel="stylesheet"/>
    <link href="/css/bootstrap.css" rel="stylesheet"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
</head>
<!--#F0FFFF-->
<!--#addce2-->
<body style="background: #F0FFFF">
<!--header-->
<div class="header header-top">
    <div class="container">
        <div class="logo">
            <h1><a href="index">
                医学影像检索系统
            </a></h1>
        </div>
        <div class="top-nav">
            <span class="menu"><img src="/images/menu.png" alt=""> </span>
            <ul>
                <li><a href="/index" class="hvr-sweep-to-bottom">主页</a></li>
                <li><a href="mail" class="hvr-sweep-to-bottom">关于</a></li>
            </ul>
            <!--script-->
            <script>
                $("span.menu").click(function () {
                    $(".top-nav ul").slideToggle(500, function () {
                    });
                });
            </script>
        </div>
        <div class="clearfix"></div>
    </div>
    <!---->
</div>
<!--contact-->
<div class="container">
    <div class="contact">
        <div class="contact-top">
            <h3>选择待检索的肿瘤</h3>
        </div>
        <div class="map">
        </div>
        <div class="contact-bottom" style="padding-left: 45%">

            <form action="" class="form-inline">
                <div class="form-group">
                    <input type="file" id="browseFile">
                </div>
            </form>
            <button id="uploadFileBtn" class="btn-primary btn" style="margin-top: 50px">开始检索</button>
            <div id="tishi" style="color: red;display: none">加载中...</div>
        </div>
    </div>
</div>
<div class="container"
     style="text-align: center;border: 2px solid black;padding-right: 70px;margin-bottom: 50px;padding-bottom: 40px">
    <h2>结果分析</h2>
    <div class="row img" style="text-align: center;display: none">
        <div class="col-md-12"><h3 style="color: red">待检索肿瘤CT预览</h3></div>
    </div>

    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4" id="d0"></div>
        <div class="col-md-4" id="shuoming"
             style="font-size: 22px;text-align: left;text-indent: 2em;padding-left:60px;padding-top: 50px"></div>

    </div>

    <div class="row img" style="text-align: center;display: none;margin-top: 20px;">
        <div class="col-md-12"><h3 style="color: red">检索的相似肿瘤展示</h3></div>
    </div>

    <div class="row">
        <div class="col-md-4" id="d1"></div>
        <div class="col-md-4" id="d2"></div>
        <div class="col-md-4" id="d3"></div>
    </div>
    <div class="row">
        <div class="col-md-4" id="d4"></div>
        <div class="col-md-4" id="d5"></div>
        <div class="col-md-4" id="d6"></div>
    </div>

    <div class="row">
        <div class="col-md-4" id="d7"></div>
        <div class="col-md-4" id="d8"></div>
        <div class="col-md-4" id="d9"></div>
    </div>
</div>
<div class="address" style="font-size: 12px;">
    <div class="container">
        <div class=" address-more">
            <h3 style="text-align: center">联系方式</h3>
            <div class="col-md-4 address-grid">
                <i class="glyphicon glyphicon-map-marker"></i>
                <div class="address1">
                    <p>山东省济南市</p>
                    <p>山东中医药大学</p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 address-grid ">
                <i class="glyphicon glyphicon-phone"></i>
                <div class="address1">
                    <p>17862970000</p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-4 address-grid ">
                <i class="glyphicon glyphicon-envelope"></i>
                <div class="address1">
                    <p><a href="mailto:@example.com">bmie530@163.com</a></p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<script>
    if (Cookies.get('username') == undefined) {
        alert('请先登录');
        window.location.href = '/index'
    }

    $('#uploadFileBtn').click(function () {
        let fileUploader = document.getElementById('browseFile');
        if (fileUploader.files[0] === undefined) {
            alert('请选择文件');
        } else {
            let fileName = fileUploader.files[0].name.split('.')[0];

            console.log(fileName);
            $.ajax({
                url: 'image/' + fileName,
                type: 'post',
                dataType: 'json',
                success: function (response) {

                    $(".img").show();
                    $("#shuoming").text("说明：上半部分为待检索的肿瘤CT影像，下半部分是根据相似性度量算法得出的相似的肿瘤图像，医生可根据相似的肿瘤CT影像，进而分析判断待检索的肿瘤特性。");
                    for (let i = 0; i < 10; i++) {
                        let flag
                        if (response[i].label == '0') {
                            flag = '恶性'
                        } else {
                            flag = '良性'
                        }

                        //response[i].id
                        //flag
                        $('#d' + i).html('<image src="/ctimages/' + response[i].id + '.jpg" style="height: 400px;width: 400px"></image>' + '<br>' + response[i].id + ' ' + flag)
                    }
                },
                error: function (error) {
                    alert('出错啦，请重试。')
                },
                beforeSend: function () {

                    console.log(123);
                    $('#tishi').show();
                },
                complete: function () {
                    console.log(123);
                    $('#tishi').hide();
                }
            })
        }
        return false;
    })
</script>
</body>
</html>